<template>
    <h1>{{ msg }}</h1>
    <h1>{{ school }}</h1>
    <button @click="test">nanananann</button>
    <slot name="qwe"></slot>
    <h1>{{ person.firstName }}</h1>
    <h1>{{ person.lastName }}</h1>
    <h1>{{ fullName }}</h1>
    <input type="text" v-model="person.firstName" /><br />
    <input type="text" v-model="person.lastName" name="" id="" /><br />
    <input type="text" v-model="fullName" name="" id="" /><br />
</template>

<script>
import { computed, reactive } from "vue";
export default {
    name: "Demo",
    props: ["msg", "school"],
    emits: ["hello"],
    setup(props, context) {
        let person = reactive({
            firstName: "张",
            lastName: "三",
        });
        let fullName = computed({
            get() {
                return person.firstName + "-" + person.lastName;
            },
            set(value) {
                console.log(value);
                const nameArr = value.split("-");
                person.firstName = nameArr[0];
                person.lastName = nameArr[1];
            },
        });
        console.log("--props--", props);
        console.log("--context--", context.slots);
        let test = function () {
            context.emit("hello", 777);
        };
        return { test, person, fullName };
    },
};
</script>
<style scoped>
</style>